<template>
  <view class="box">
    <view class="box-img" :style="{'background-image' : 'url('+songList.coverImgUrl+')'}"></view>
     <musichead class="home-title" title="歌单" icon="true"></musichead>
     <!-- 标题 -->
   <view v-show="!isLoading">
     <view class="box-title">
         <view class="box-title-left">
           <image :src="songList.coverImgUrl"></image>
           <text class="iconfont icon-yousanjiao">30亿</text>
         </view>
         <view class="box-title-right">
           <view class="box-title-right-title">{{songList.name}}</view>
           <view class="box-title-right-center">
             <image :src="avaList.avatarUrl"></image>
             <text>网易云音乐</text>
           </view>
           <view class="box-title-end">
             <text>{{songList.description}}</text>
           </view>
         </view>
       </view>
       <!-- 分享 -->
     <view class="box-fen">
            <view class="iconfont icon-fenxiang">分享给微信好友</view>
         </view>
         
         <!-- 播放列表 -->
       <view class="box-music">
           <view class="box-music-title">
             <text class="iconfont icon-bofang"></text>
             <text>播放全部</text>
             <text>(共{{songList.trackCount}}首)</text>
           </view>
           <view class="box-music-item" v-for="(ii,index) in songLists" :key="index" @click="toDetail(ii)">
               <view class="box-music-item-left">   
                 <text class="left-index">{{index+1}}</text>
                 <view class="box-music-item-left1">
                   <text>{{ii.name}}</text>
                   <text>{{ii.name}}--{{ii.ar[0].name}}</text>
                 </view>
             </view>
             <view class="box-music-item-right">
               <text class="iconfont icon-bofang_o"></text>
             </view>
           </view>
         </view>
       </view>
   </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        ids:1,
        songList:[],
        avaList:'',
        isLoading:true,
        songLists:[]
      }
    },
    onLoad(options){
     this.ids = options.id
      this.getAllList()
      this.getSongList()
    },
    methods: {
     async getAllList(){
        let result = await uni.$http.get('/top/list?id='+this.ids)
        if(result.data.code==200){
          this.songList = result.data.playlist
          this.avaList = result.data.playlist.creator
          this.isLoading = false
        }
      },
     async getSongList(){
        let result = await uni.$http.get('/playlist/detail?id='+this.ids)
        console.log(result)
        if(result.data.code==200){
          this.songLists = result.data.playlist.tracks
          this.$store.commit('ALLID',result.data.playlist.trackIds)
        }
      },
      toDetail(ii){
        uni.navigateTo({
          url:'/subpkg/details/details?id='+ii.id
        })
      }
    
    }
  }
</script>

<style scoped>
  .box-img{
    position:relative;
   width:100%;
   height:100vh;
   background-size: cover;
   filter: blur(10px);
   transform: scale(1.1);
  }
  .home-title{
    position: absolute;
    top:0;
    left:0;
  }
  .box-title{
    display: flex;
    position: absolute;
    top:180rpx;
    left:0;
  }
  .box-title-left{
    position: relative;
  }
.box-title-left image{
  width:290rpx;
  height:290rpx;
  margin: 0rpx 26rpx;
  border-radius: 23rpx;
}
.box-title-left .icon-yousanjiao{
  position: absolute;
  top:6rpx;
  left:196rpx;
  color:white;
  font-size:33rpx;
  }
  .box-title-right-title{
    font-size: 36rpx;
    color:white;
  }
  .box-title-right-center{
    margin-top: 23rpx;
    color:white;  
  }
  .box-title-right-center image{
    width:69rpx;
    height:69rpx;
    border-radius: 50%;
  }
  .box-title-right-center text{
    display:block;
    margin-top:-70rpx;
    margin-left:81rpx;
  }
  .box-title-end{
    margin-top:39rpx;
    color:#e2e2e2;  
  }
  .box-fen{
    position:absolute;
    top:511rpx;
    left:159rpx;
    width:491rpx;
    height:92rpx;
    border-radius: 80rpx;
    background: #cacaca;
    margin:18rpx auto;
  }
  .box-fen view{
    font-size: 39rpx;
    font-weight: 600;
    line-height: 92rpx;
    text-align: center;
    color:white;
  }
  .box-music{
    position: absolute;
    top:666rpx;
    border-radius: 50rpx;
    width:100%;
    height:100vh;
    background: #fdf7fb;
  }
.box-music-title{
  display:flex;
  margin-top:44rpx;
}
.box-music-title text:nth-child(1){
  margin-left:23rpx;
  margin-top:50rpx;
  font-size: 66rpx;
}
.box-music-title text:nth-child(2){
  margin-left:23rpx;
  margin-top:50rpx;
  font-size: 36rpx;
  font-weight: 800;
}
.box-music-title text:nth-child(3){
  margin-left:18rpx;
  margin-top:50rpx;
  font-size: 31rpx;
  color:#bfb9ba;
}
.box-music-item{
  display: flex;
  margin-top:66rpx;
  margin-left:33rpx;
}
.box-music-item-left{
  display: flex;
}
.left-index{
  font-size:47rpx;
  color:#a39f9f;
  margin-top:23rpx;
}
.box-music-item-left1{
  margin-left:44rpx;
  width:539rpx;
}
.box-music-item-left1 text:nth-child(1){
  display:block;
  font-size:44rpx;
  white-space:nowrap;
  text-overflow:ellipsis;
  overflow: hidden; 
  
}
.box-music-item-left1 text:nth-child(2){
  /* font-size:47rpx; */
  display:block;
  margin-top:8rpx;
  color:#999898;
  font-size:32rpx;
  white-space:nowrap;
  text-overflow:ellipsis;
  overflow: hidden; 
}
.box-music-item-right{
  margin-left:6rpx;
  margin-top:15rpx;
}
.box-music-item-right text{
  font-size:86rpx;
  color:#7a7678;
}
</style>
